<script setup>
import CreatTask from '@/components/CreatTask.vue';
import DetailsTask from '@/components/DetailsTask.vue';
import OperationTask from '@/components/OperationTask.vue';
import { reactive, ref } from 'vue';
import { showMessage, timestampToTime } from '@/public/public';

import { useUserStore } from '@/stores/counter';
import { getTasks, addTasks } from '@/api/tasks';
import { editTaks } from '@/api/tasks';

const userStore = useUserStore();
// console.log(userStore)
const userMsg = userStore.userMsg;

const tableData = ref([]);

(async function(){
    getTasks(userMsg.token).then(res=>{

        console.log('-----', res);

        // tableData.push(...res.data.data)
        tableData.value = res.data.data;
    })
})()
// console.log(tableData);

// 创建详情  响应式数据
const dialogFormDetails = ref(false);
    // rowData保存给详情子组件传的数据
const rowData = reactive({});
    // 点击详情，触发的事件函数
const detailsRow = (row)=>{
    dialogFormDetails.value = true;

    rowData.title = row.title;
    rowData.creatTime = row.creatTime;
    rowData.staffName = row.staffName;
    rowData.startTime = row.startTime;
    rowData.endTime = row.endTime;
    rowData.state = row.state;
    rowData.approval_time = row.approval_time;
    rowData.leader = row.leader;
    rowData.postscript = row.postscript;//备注
    rowData.content = row.content;
    rowData.application_type = row.application_type;
    rowData.application_reason = row.application_reason;
    rowData.sectorName = row.sectorName;
    console.log("操作功能,弹出操作页面");
}


// 操作按钮  响应式数据
const dialogFormOperation = ref(false);
    // operaData保存给操作子组件传的数据
const operaData = reactive({}) 
    // 点击操作，触发的事件函数
const operationRow = (row)=>{
    dialogFormOperation.value = true;
    operaData.state = row.state;//状态
    operaData.tasksId = row.tasksId;
    
    operaData.postscript = row.postscript//备注
    console.log("详情操作,弹出详情信息");
}

// 创建事件  响应式数据
const dialogFormVisible = ref(false);

const creatRow = (row)=>{
    dialogFormVisible.value = true;
    console.log("创建事件,弹出创建事件表单");
}

// 查看详情
function isShow(val){
    dialogFormDetails.value = val;
}
// 操作事件
function isShow1(val){
    dialogFormOperation.value = false;
    const data = {...val,token:userStore.userMsg.token,taskId:operaData.tasksId};
    editTaks(data).then((res)=>{
        if (res.status === 200) {
            tableData.value = [];
            getTasks(userMsg.token).then(res => {
                tableData.value = res.data.data;
            })
        }
    })
}
// 创建任务
function isShow2(ruleForm){
    dialogFormVisible.value = false;
    if (!ruleForm) return;
    const tbData = {};
    for(let i in ruleForm){
        tbData[i] = ruleForm[i]
    }
    // 改变时间格式

    if(tbData.creatTime){
        tbData.creatTime = timestampToTime(tbData.creatTime).slice(0,10);
    }
    if(tbData.startTime){
        tbData.startTime = timestampToTime(tbData.startTime).slice(0,10);
    }
    if(tbData.endTime){
        tbData.endTime = timestampToTime(tbData.endTime).slice(0,10);
    }
    // 判断状态转换为文字
    // tbData.approveState = tbData.approveState === 0 ? "未完成" : "已完成";
    tbData.token = userMsg.token;
    // tableData.push(tbData);
    // console.log(tbData);
    addTasks(tbData).then( async (res) => {
        console.log(res);
        if (res.status === 200) {

            if(res.data.code === 1){
                showMessage(res.data.msg, 'error', 2000);
                return;
            }

            tableData.value = [];
           await getTasks(userMsg.token).then(res => {
                // tableData.push(...res.data.data)
                tableData.value = res.data.data;
            })
        }
    })

}

</script>

<template>
    <el-table :data="tableData" style="width: 80%" >
        <el-table-column fixed prop="title" label="任务标题" style="width: 14%" />
        <el-table-column prop="creatTime" label="创建时间" style="width: 14%" />
        <el-table-column prop="leader" label="发起人" style="width: 14%" />
        <el-table-column prop="startTime" label="开始时间" style="width: 14%" />
        <el-table-column prop="endTime" label="结束时间" style="width: 14%" />
        <el-table-column prop="approveState" label="状态" style="width: 14%" />
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <!-- 详情页按钮 -->
                <el-button 
                    link 
                    type="primary" 
                    size="small"
                    @click.prevent="detailsRow(scope.row)"
                    >
                    详情
                </el-button>
                <!-- 拿到点击的索引-->
                <!-- @click.prevent="detailsRow(scope.$index)" -->
                <!-- 操作页按钮 -->
                <el-button 
                    link 
                    type="primary" 
                    size="small"
                    @click.prevent="operationRow(scope.row)"
                >
                    操作
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-button class="mt-4" style="width: 80%" @click="creatRow(row)">
      创建任务
    </el-button>


    <!-- 弹出框--详情组件 -->
    <el-dialog v-model="dialogFormDetails">
        <DetailsTask
            :dialogFormDetails="dialogFormDetails"
            @isShow="isShow"
            :rowData="rowData"
        ></DetailsTask>
    </el-dialog>
    <!-- 弹出框--操作组件 -->
    <el-dialog v-model="dialogFormOperation">
        <OperationTask
            :dialogFormOperation="dialogFormOperation"
            @isShow1="isShow1"
            :operaData="operaData"
        ></OperationTask>
    </el-dialog>

    <!-- 弹出框--创建事件 -->
    <!-- isShow2创建任务点击提交触发的事件 -->
    <el-dialog v-model="dialogFormVisible">
        <CreatTask
            :dialogFormVisible="dialogFormVisible"
            @isShow2="isShow2"
        ></CreatTask>
    </el-dialog>

</template>

<style scoped>

</style>
